<template>
    <div class="header">
      <h1 class="logo">
        <img src="../../assets/images/logo.png" alt="">
      </h1>
      <div class="btn" v-on:click="change()">
        <p class="bOne"></p>
        <p class="bTwo"></p>
        <p class="bThree"></p>
      </div>
      <span class="headerIcon"></span>
    </div>

</template>

<script>
    export default {
        name: "Vheader",
        methods: {
          change() {
            this.$store.commit('increment');
            this.$store.state.lyn=false;
            this.$store.state.kinds=false;
            this.$store.state.buy=false;
            this.$store.state.server=false
            this.$store.state.bd=''
            // console.log(this.$store.state.msg);
          }
        }
    }
</script>

<style scoped>
  .header{
    height: 50px;
    width: 100%;
    background: black;
    opacity: 0.9;
    padding: 0;
    margin: 0;
    position: fixed;
    top:0;
    overflow: hidden;
    z-index: 5;
  }
  .logo{
    width: 100px;
    height: 50px;
    line-height: 50px;
    margin-left: 20px;
    text-align: center;
    float: left;
  }
  .logo img{
    width: 100%;
  }
  .btn{
    height: 25px;
    width: 25px;
    color: aliceblue;
    float: right;
    margin: 12.5px 20px 0 20px;
    display: flex;
    flex-direction:column;
  }
  .headerIcon{
    height: 24px;
    width: 24px;
    float: right;
    background: url("../../assets/images/help.png");
    margin-top: 12.5px;
  }
  .bOne{
    width: 70%;
    height: 2px;
    border-radius: 2px;
    background: honeydew;
    margin-top: 7px;
  }
  .bTwo{
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: honeydew;
    margin-top: 3px;
  }
  .bThree{
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: honeydew;
    margin-top: 3px;
  }
</style>
